<!-- 首页 -->
<template>
  <div class="stbox">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">题库管理</el-breadcrumb-item>
        <el-breadcrumb-item>题库统计分析</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="thinking-content">
      <!--不同难度题目数量 -->
      <div class="state-title">
        <div class="st-gbox" style="width:1200px;height: 250px;">
          <div class="cavasbox" ref="difficultychart"></div>
        </div>
      </div>
      <!-- 难度级别的题目占题库总数-->
      <div class="state-title">
        <div class="st-gbox" style="width:500px;height: 250px;">
          <div class="cavasbox" ref="typechart"></div>
        </div>
      </div>
        <!-- 难度级别的题目占题库总数-->
        <div class="state-title">
        <div class="st-gbox" style="width:1200px;height: 250px;">
          <div class="cavasbox" ref="scoreschart"></div>
        </div>
      </div>
    </div>
  
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      scoresChart: null, // ECharts实例 
      difficultyData: [ // 不同难度题目的数量  
        {name: '简单', value: 50},  
        {name: '中等', value: 70},  
        {name: '困难', value: 30}  
      ],  
      questionTypeData: [ // 不同题型的数量  
        {name: '选择题', value: 80},  
        {name: '填空题', value: 40},  
        {name: '简答题', value: 60},  
        {name: '案例分析', value: 20}  
      ],
      difficultyQuestion: [ // 难度级别的题目数量  
        {name: '简单', value: 100},  
        {name: '中等', value: 200},  
        {name: '困难', value: 150},  
      ],  
      totalQuestions: 450 ,// 题库总数  
      scoresData: [ 
        { date: '2024-04-01', score: 85 },  
        { date: '2024-04-02', score: 92 },  
        { date: '2024-04-03', score: 88 },  
        { date: '2024-04-04', score: 95 },  
        { date: '2024-04-05', score: 89 },  
        { date: '2024-04-06', score: 91 },  
        { date: '2024-04-07', score: 90 },  
      ],  
 
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getNumber()
    this.drawPieChart()
    this.initChart() 
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 不同难度题目数量
    getNumber() {
      let difficultyOption = {  
        title: {  
          text: '不同难度题目数量'  
        },  
        tooltip: {},  
        xAxis: {  
          data: this.difficultyData.map(item => item.name)  
        },  
        yAxis: {},  
        series: [{  
          name: '数量',  
          type: 'bar',  
          data: this.difficultyData.map(item => item.value)  
        }]  
      };  
      this.chart = Chart.init(this.$refs.difficultychart)
      this.chart.setOption(difficultyOption)
    },
    // 难度级别的题目占题库总数
    drawPieChart() {       
      // 计算每个难度级别的比例  
      const seriesData = this.difficultyData.map(item => {  
        const percentage = ((item.value / this.totalQuestions) * 100).toFixed(2);  
        return {name: item.name, value: percentage};  
      });  
      // 指定图表的配置项和数据  
      let  typeOption = {  
        title: {  
          text: '难度级别的题目占题库总数',  
          // subtext: '比例',  
          left: 'center'  
        },  
        tooltip: {  
          trigger: 'item'  
        },  
        legend: {  
          orient: 'vertical',  
          left: 'left',  
        },  
        series: [  
          {  
            name: '题目数量',  
            type: 'pie',  
            radius: ['50%', '70%'],  
            avoidLabelOverlap: false,  
            // label: {  
            //   show: true,  
            //   position: 'center'  
            // },  
            emphasis: {  
              label: {  
                show: true,  
                fontSize: '30',  
                fontWeight: 'bold'  
              }  
            },  
            labelLine: {  
              show: false  
            },  
            data: seriesData  
          }  
        ]  
      };  
      //显示图表
      this.chart = Chart.init(this.$refs.typechart)
      this.chart.setOption(typeOption)
    },
    initChart() {  
      // 指定图表的配置项和数据  
      const option = {  
        title: {  
          text: '考生得分随时间变化',  
        },  
        tooltip: {  
          trigger: 'axis',  
        },  
        xAxis: {  
          type: 'category',  
          data: this.scoresData.map(item => item.date),  
        },  
        yAxis: {  
          type: 'value',  
          min: 80, // 设置 Y 轴最小值  
          max: 100, // 设置 Y 轴最大值  
        },  
        series: [  
          {  
            data: this.scoresData.map(item => item.score),  
            type: 'line',  
          },  
        ],  
      };  
        // 初始化 
        this.scoresChart = Chart.init(this.$refs.scoreschart);  
      this.scoresChart.setOption(option); 
      // 窗口大小变化时调整图表大小  
      window.addEventListener('resize', this.scoresChart.resize);   
    }, 
    beforeDestroy() {  
    // 组件销毁前，清除窗口大小变化事件监听  
    window.removeEventListener('resize', this.scoresChart.resize);  
    // 销毁
    if (this.scoresChart) {  
      this.scoresChart.dispose();  
    }  
  },  
  }
};
</script>
<style> 
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}


.stsearch {
  text-align: center;
}

.text-c {
  text-align: center;
}

.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.canvas{
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}



.breadcrumb-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.thinking-content {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  
}
.latest-updates-card {  
  background-color: #fff;  
  border: 1px solid #ddd;  
  border-radius: 5px;  
  padding: 20px;  
  margin-bottom: 20px;  
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
}  
  
.latest-updates-card h2 {  
  font-size: 18px;  
  margin-bottom: 15px;  
}  
  
.latest-updates-card ul {  
  list-style-type: none;  
  padding: 0;  
}  
  
.latest-updates-card li {  
  margin-bottom: 10px;  
} 
</style>